<template>
  <div class="login-bg">
    <!-- 左上角 logo+文字 -->
    <div class="corner-logo-text">
      <img src="/logo.png" alt="logo" class="corner-logo-img" />
      <span class="corner-logo-title">{{ $t('login.logoText') }}</span>
    </div>
    
    <!-- 添加Header组件 -->
    <Header />
    
    <!-- 背景图片上方的文字 -->
    <div class="login-bg-text">
      <h1 class="login-main-title">{{ $t('login.mainTitle') }}</h1>
      <div class="login-sub-title">
        <p>{{ $t('login.subTitle1') }}</p>
        <p>{{ $t('login.subTitle2') }}</p>
      </div>
    </div>
    <!-- 背景图片 -->
    <img src="/src/assets/images/login/首页背景.png" alt="背景" class="login-bg-img" />
    
    <!-- 登录表单 -->
    <div class="login-form-wrapper">
      <div class="login-form-container">
        <h1 class="form-title animate-fadeInUp" data-delay="0.2">{{ loginType === 'student' ? $t('login.student') : $t('login.enterprise') }}{{ $t('login.title') }}</h1>
        
        <!-- 用户类型切换 -->
        <div class="user-type-switch animate-fadeInUp" data-delay="0.3">
          <button 
            class="switch-button" 
            :class="{ active: loginType === 'student' }"
            @click="switchLoginType('student')"
          >
            <el-icon><User /></el-icon>
            <span>{{ $t('login.student') }}</span>
          </button>
          <button 
            class="switch-button" 
            :class="{ active: loginType === 'enterprise' }"
            @click="switchLoginType('enterprise')"
          >
            <el-icon><OfficeBuilding /></el-icon>
            <span>{{ $t('login.enterprise') }}</span>
          </button>
        </div>
        
        <!-- 学生登录表单 -->
        <div v-if="loginType === 'student'" class="form-content" :key="'student-' + animationKey">
          <el-form 
            ref="studentLoginForm" 
            :model="loginForm" 
            :rules="loginRules" 
            label-position="top"
            @submit.prevent="handleLogin"
          >
            <div class="form-group animate-fadeInUp" data-delay="0.4">
              <div class="floating-input-wrapper">
                <input
                  id="email"
                  v-model="loginForm.email"
                  type="email"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="off"
                />
                <label for="email" class="floating-label">{{ $t('login.email') }}</label>
              </div>
            </div>
            
            <div class="form-group animate-fadeInUp" data-delay="0.5">
              <div class="floating-input-wrapper">
                <input
                  id="password"
                  v-model="loginForm.password"
                  :type="showPassword ? 'text' : 'password'"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="new-password"
                />
                <label for="password" class="floating-label">{{ $t('login.password') }}</label>
                <button
                  type="button"
                  class="password-toggle"
                  @click="togglePassword"
                >
                  <svg v-if="showPassword" class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                  </svg>
                  <svg v-else class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="form-options animate-fadeInUp" data-delay="0.6">
              <label class="checkbox-wrapper">
                <el-checkbox v-model="rememberMe" class="checkbox"></el-checkbox>
                <span class="checkbox-label">{{ $t('login.rememberMe') }}</span>
              </label>
              <el-link type="primary" @click="goToResetPassword" class="forgot-password">{{ $t('login.forgotPassword') }}</el-link>
            </div>
            
            <div class="terms-checkbox animate-fadeInUp" data-delay="0.7">
              <label class="checkbox-wrapper">
                <el-checkbox v-model="loginForm.agreePolicy" class="checkbox" @change="onPolicyChange"></el-checkbox>
                <span class="checkbox-label">
                  {{ $t('login.agreePolicy') }}
                  <el-link type="primary" @click.stop.prevent="openPolicy" class="terms-link" href="javascript:void(0)">{{ $t('login.serviceTerms') }}</el-link>
                  {{ $t('common.and') }}
                  <el-link type="primary" @click.stop.prevent="openPrivacy" class="terms-link" href="javascript:void(0)">{{ $t('login.privacyPolicy') }}</el-link>
                </span>
              </label>
            </div>
            
            <el-button 
              type="primary" 
              @click="handleLogin"
              :loading="loginLoading"
              class="login-btn animate-fadeInUp"
              data-delay="0.8">
              <span v-if="loginLoading" class="loading-spinner"></span>
              {{ loginLoading ? $t('common.loading') : $t('login.login') }}
            </el-button>
          </el-form>
        </div>
        
        <!-- 企业登录表单 -->
        <div v-if="loginType === 'enterprise'" class="form-content" :key="'enterprise-' + animationKey">
          <el-form 
            ref="enterpriseLoginForm" 
            :model="loginForm" 
            :rules="loginRules" 
            label-position="top"
            @submit.prevent="handleLogin"
          >
            <div class="form-group animate-fadeInUp" data-delay="0.4">
              <div class="floating-input-wrapper">
                <input
                  id="enterprise-email"
                  v-model="loginForm.email"
                  type="email"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="off"
                />
                <label for="enterprise-email" class="floating-label">{{ $t('login.email') }}</label>
              </div>
            </div>
            
            <div class="form-group animate-fadeInUp" data-delay="0.5">
              <div class="floating-input-wrapper">
                <input
                  id="enterprise-password"
                  v-model="loginForm.password"
                  :type="showPassword ? 'text' : 'password'"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="new-password"
                />
                <label for="enterprise-password" class="floating-label">{{ $t('login.password') }}</label>
                <button
                  type="button"
                  class="password-toggle"
                  @click="togglePassword"
                >
                  <svg v-if="showPassword" class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                  </svg>
                  <svg v-else class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="form-options animate-fadeInUp" data-delay="0.6">
              <label class="checkbox-wrapper">
                <el-checkbox v-model="rememberMe" class="checkbox"></el-checkbox>
                <span class="checkbox-label">{{ $t('login.rememberMe') }}</span>
              </label>
              <el-link type="primary" @click="goToResetPassword" class="forgot-password">{{ $t('login.forgotPassword') }}</el-link>
            </div>
            
            <div class="terms-checkbox animate-fadeInUp" data-delay="0.7">
              <label class="checkbox-wrapper">
                <el-checkbox v-model="loginForm.agreePolicy" class="checkbox" @change="onPolicyChange"></el-checkbox>
                <span class="checkbox-label">
                  {{ $t('login.agreePolicy') }}
                  <el-link type="primary" @click.stop.prevent="openPolicy" class="terms-link" href="javascript:void(0)">{{ $t('login.serviceTerms') }}</el-link>
                  {{ $t('common.and') }}
                  <el-link type="primary" @click.stop.prevent="openPrivacy" class="terms-link" href="javascript:void(0)">{{ $t('login.privacyPolicy') }}</el-link>
                </span>
              </label>
            </div>
            
            <el-button 
              type="primary" 
              @click="handleLogin"
              :loading="loginLoading"
              class="login-btn animate-fadeInUp"
              data-delay="0.8">
              <span v-if="loginLoading" class="loading-spinner"></span>
              {{ loginLoading ? $t('common.loading') : $t('login.login') }}
            </el-button>
          </el-form>
        </div>
        
        <div class="login-footer animate-fadeInUp" data-delay="0.9">
          <p class="register-text">
            {{ $t('login.noAccount') }}
            <router-link 
              :to="{ path: '/register' }" 
              class="register-link"
            >
              {{ $t('login.registerNow') }}
            </router-link>
          </p>
        </div>
        
        <!-- 账户状态提示 -->
        <el-alert 
          v-if="accountStatus" 
          :type="accountStatus.type" 
          :title="accountStatus.message" 
          show-icon 
          style="margin-top: 16px;" 
        />
      </div>
    </div>
    
    <!-- 服务条款对话框 -->
    <el-dialog
      v-model="policyDialogVisible"
      :title="$t('login.serviceTerms')"
      width="60%"
      :before-close="closePolicyDialog"
      class="policy-dialog"
    >
      <div class="policy-content" v-html="policyContent"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closePolicyDialog">{{ $t('common.close') }}</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 隐私政策对话框 -->
    <el-dialog
      v-model="privacyDialogVisible"
      :title="$t('login.privacyPolicy')"
      width="60%"
      :before-close="closePrivacyDialog"
      class="policy-dialog"
    >
      <div class="policy-content" v-html="privacyContent"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closePrivacyDialog">{{ $t('common.close') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { User, OfficeBuilding } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { userApi } from '../../api';
import { TokenManager } from '../../utils/request';
import { policyApi } from '../../api';
import Header from '../../components/layout/Header.vue';
import { certificationManager } from '../../utils/certification';

export default {
  name: 'Login',
  components: {
    User,
    OfficeBuilding,
    Header
  },
  setup() {
    const router = useRouter();
    const { t, locale } = useI18n();
    
    // 响应式数据
    const loginType = ref('student'); // 默认学生登录
    const studentLoginForm = ref(null);
    const enterpriseLoginForm = ref(null);
    const animationKey = ref(0); // 动画控制键
    const loginForm = reactive({
      email: '',
      password: '',
      agreePolicy: false
    });
    
    const loginRules = reactive({
      email: [
        { required: true, message: t('login.emailRequired') || '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: t('login.emailFormat') || '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      password: [
        { required: true, message: t('login.passwordRequired') || '请输入密码', trigger: 'blur' },
        { min: 6, message: t('login.passwordLength') || '密码长度不能少于6位', trigger: 'blur' }
      ],
      agreePolicy: [
        {
          validator: (rule, value, callback) => {
            if (value === true) {
              callback();
            } else {
              callback(new Error(t('login.pleaseAgree') || '请阅读并同意服务条款和隐私政策'));
            }
          },
          trigger: 'change'
        }
      ]
    });

    const loginLoading = ref(false);
    const rememberMe = ref(false);
    const accountStatus = ref(null);
    const currentLanguage = ref(locale.value);
    
    // 密码显示切换功能
    const showPassword = ref(false);
    const togglePassword = () => {
      showPassword.value = !showPassword.value;
    };
    
    // 协议相关
    const policyDialogVisible = ref(false);
    const privacyDialogVisible = ref(false);
    const policyContent = ref('');
    const privacyContent = ref('');
    const userAgreementVersion = ref('');
    const privacyPolicyVersion = ref('');

    // 组件挂载后执行
    onMounted(async () => {
      // 设置默认协议版本
      userAgreementVersion.value = '1.0';
      privacyPolicyVersion.value = '1.0';
    });

    // 计算属性
    const isAccountLocked = computed(() => {
      const lockInfo = localStorage.getItem('accountLockInfo');
      if (!lockInfo) return false;
      
      const { email, timestamp, count } = JSON.parse(lockInfo);
      const now = Date.now();
      const lockDuration = 30 * 60 * 1000; // 30分钟
      
      return email === loginForm.email && 
             count >= 5 && 
             (now - timestamp) < lockDuration;
    });

    const remainingLockTime = computed(() => {
      const lockInfo = localStorage.getItem('accountLockInfo');
      if (!lockInfo) return 0;
      
      const { timestamp } = JSON.parse(lockInfo);
      const now = Date.now();
      const lockDuration = 30 * 60 * 1000; // 30分钟
      const remaining = Math.max(0, lockDuration - (now - timestamp));
      
      return Math.ceil(remaining / 1000 / 60); // 返回分钟数
    });

    // 方法
    const switchLoginType = (type) => {
      loginType.value = type;
      // 清空表单数据
      loginForm.email = '';
      loginForm.password = '';
      loginForm.agreePolicy = false;
      // 清空错误状态
      accountStatus.value = null;
      // 重置表单验证
      nextTick(() => {
        if (type === 'student' && studentLoginForm.value) {
          studentLoginForm.value.clearValidate();
        } else if (type === 'enterprise' && enterpriseLoginForm.value) {
          enterpriseLoginForm.value.clearValidate();
        }
        // 重新触发动画
        animationKey.value++;
      });
    };

    const goToResetPassword = () => {
      router.push('/reset-password');
    };

    const openPolicy = async () => {
      try {
        const res = await policyApi.getUserAgreement();
        if (res && res.data && res.data.content) {
          policyContent.value = res.data.content;
          userAgreementVersion.value = res.data.version || '';
        } else {
          policyContent.value = '协议内容加载失败';
        }
      } catch (e) {
        policyContent.value = '协议内容加载失败';
      } finally {
      policyDialogVisible.value = true;
      }
    };

    const closePolicyDialog = () => {
      policyDialogVisible.value = false;
    };

    const openPrivacy = async () => {
      try {
        const res = await policyApi.getPrivacyPolicy();
        if (res && res.data && res.data.content) {
          privacyContent.value = res.data.content;
          privacyPolicyVersion.value = res.data.version || '';
        } else {
          privacyContent.value = '隐私政策内容加载失败';
        }
      } catch (e) {
        privacyContent.value = '隐私政策内容加载失败';
      } finally {
      privacyDialogVisible.value = true;
      }
    };

    const closePrivacyDialog = () => {
      privacyDialogVisible.value = false;
    };

    const onPolicyChange = (value) => {
      loginForm.agreePolicy = value;
    };

    const handleLogin = async () => {
      // 检查账户锁定状态
      if (isAccountLocked.value) {
        accountStatus.value = {
          type: 'error',
          message: `账户已被锁定，剩余${remainingLockTime.value}分钟`
        };
        return;
      }

      // 表单验证
      const formRef = loginType.value === 'student' ? studentLoginForm.value : enterpriseLoginForm.value;
      if (!formRef) return;

      try {
        await formRef.validate();
      } catch (error) {
        return;
      }

      if (!loginForm.agreePolicy) {
        ElMessage.error('请阅读并同意服务条款和隐私政策');
        return;
      }

      loginLoading.value = true;
      accountStatus.value = null;

      try {
        // 根据登录类型选择不同的API接口
        const apiUrl = loginType.value === 'student' ? '/api/student/login' : '/api/enterprise/login';
        
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            email: loginForm.email,
            password: loginForm.password,
            privacy_policy_agreed: 1
          })
        });

        const data = await response.json();

        if (data.code === 200 && data.data) {
          // 保存登录信息
          const { access_token, refresh_token, user_type, user_id } = data.data;
          localStorage.setItem('access_token', access_token);
          localStorage.setItem('refresh_token', refresh_token);
          localStorage.setItem('user_type', user_type);
          localStorage.setItem('user_id', user_id.toString());
          
          // 登录成功后的处理
          ElMessage.success('登录成功！');
          
          // 根据用户类型跳转到不同页面
          if (loginType.value === 'student') {
            router.push('/use/home');
          } else {
            // 企业用户登录后，检查认证状态
            try {
              // 清除缓存，确保获取最新状态
              certificationManager.clearCache();
              
              // 获取认证状态
              const certificationStatus = await certificationManager.getStatus();
              console.log('企业认证状态:', certificationStatus);
              
              if (certificationStatus.status === 'approved') {
                // 已认证企业直接跳转到企业端首页
                console.log('企业已认证，跳转到首页');
                router.push('/henterprise/home');
              } else if (certificationStatus.status === 'pending_review') {
                // 审核中的企业跳转到认证状态页面
                console.log('企业认证审核中，跳转到认证状态页面');
                router.push('/code/enterprise/certification');
              } else if (certificationStatus.status === 'rejected') {
                // 被拒绝的企业跳转到认证状态页面
                console.log('企业认证被拒绝，跳转到认证状态页面');
                router.push('/code/enterprise/certification');
              } else if (certificationStatus.status === 'unsubmitted') {
                // 未提交认证的企业跳转到认证申请页面
                console.log('企业未提交认证，跳转到认证申请页面');
                router.push('/code/enterprise/certification/form');
              } else {
                // 未知状态，默认跳转到认证申请页面
                console.log('企业认证状态未知，默认跳转到认证申请页面');
                router.push('/code/enterprise/certification/form');
              }
            } catch (error) {
              console.error('获取企业认证状态失败:', error);
              // 出错时默认跳转到认证申请页面，确保用户可以完成认证流程
              ElMessage.warning('无法获取企业认证状态，请完成企业认证');
              router.push('/code/enterprise/certification/form');
            }
          }
          
        } else {
          ElMessage.error(data.message || '登录失败，请重试');
        }
        
      } catch (error) {
        console.error('登录失败:', error);
        
        // 处理不同的错误响应
        if (error.response) {
          const { status, data } = error.response;
          
          switch (status) {
            case 401:
              ElMessage.error(data.message || '邮箱或密码错误');
              break;
            case 403:
              ElMessage.error(data.message || '账户被锁定或禁用');
              break;
            default:
              ElMessage.error(data.message || '登录失败，请重试');
          }
        } else {
          ElMessage.error('网络错误，请稍后重试');
        }
      } finally {
        loginLoading.value = false;
      }
    };

    return {
      // 响应式数据
      loginType,
      studentLoginForm,
      enterpriseLoginForm,
      animationKey,
      loginForm,
      loginRules,
      loginLoading,
      rememberMe,
      accountStatus,
      currentLanguage,
      showPassword,
      policyDialogVisible,
      privacyDialogVisible,
      policyContent,
      privacyContent,
      userAgreementVersion,
      privacyPolicyVersion,
      
      // 计算属性
      isAccountLocked,
      remainingLockTime,
      
      // 方法
      switchLoginType,
      togglePassword,
      goToResetPassword,
      openPolicy,
      closePolicyDialog,
      openPrivacy,
      closePrivacyDialog,
      onPolicyChange,
      handleLogin
    };
  }
};
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* logo样式 */
.logo-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 10px;
  z-index: 10;
}
.login-logo {
  width: 120px;
  height: auto;
  display: block;
}

/* 背景图片上方的文字样式 */
.login-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  color: #fff;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.25);
  /* 调整位置，避免被登录框遮挡 */
  margin-right: 450px;
}

.login-main-title {
  font-size: 56px;
  font-weight: bold;
  margin-bottom: 32px;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.25);
}

.login-sub-title {
  font-size: 24px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.18);
  margin-bottom: 16px;
}

.login-bg-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.login-form-wrapper {
  position: fixed;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  width: 500px;
  max-width: 90vw;
  background: white;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin-right: 20px;
  height: auto;
  max-height: 80vh;
}



/* 登录表单容器 */
.login-form-container {
  padding: 50px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-sizing: border-box;
  height: auto;
  max-height: 80vh;
}

/* 用户类型切换按钮 */
.user-type-switch {
  display: flex;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 25px;
  gap: 4px;
}

.switch-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  color: #666;
  background: transparent;
  position: relative;
  overflow: hidden;
  border: none;
}

.switch-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.switch-button:hover::before {
  left: 100%;
}

.switch-button:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
  transform: translateY(-1px);
}

.switch-button.active {
  background: white;
  color: #ff6b35;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

.switch-button .el-icon {
  margin-right: 8px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.switch-button:hover .el-icon {
  transform: scale(1.1);
}

.switch-button span {
  font-size: 14px;
}

.form-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 30px 0;
  text-align: left;
}

.form-content {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:nth-child(2) 
  /* 移除动画延迟 */


/* 浮动标签样式 */
.floating-input-wrapper {
  position: relative;
}

.floating-input {
  width: 100%;
  height: 56px;
  padding: 16px 20px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.floating-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
  transition: left 0.6s;
}

.floating-input:hover::before {
  left: 100%;
}

.floating-input:hover {
  border-color: #ff6b35;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

.floating-input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
  transform: translateY(-2px);
}

/* 移除浏览器默认的密码显示图标 */
.floating-input::-ms-reveal,
.floating-input::-ms-clear {
  display: none;
}

.floating-input::-webkit-contacts-auto-fill-button,
.floating-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* 防止浏览器自动填充时的颜色变化 */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #333 !important;
  background-color: white !important;
  background-clip: content-box !important;
}

.floating-label {
  position: absolute;
  left: 20px;
  top: 18px;
  font-size: 1.1rem;
  color: #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  transform-origin: left top;
  font-weight: 500;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
  transform: translateY(-28px) scale(0.85);
  color: #ff6b35;
  background: rgba(255, 255, 255, 0.95);
  padding: 0 8px;
  border-radius: 4px;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  z-index: 2;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 确保小眼睛垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* 当输入框获得焦点或有内容时，小眼睛向上移动以跟随标签位置 */
.floating-input:focus ~ .password-toggle,
.floating-input:not(:placeholder-shown) ~ .password-toggle {
  top: 18px;
  transform: translateY(0) scale(0.9);
}

.password-toggle:hover {
  color: #ff6b35;
  transform: translateY(-50%) scale(1.1);
}

/* 当输入框获得焦点或有内容时，悬停效果也要相应调整 */
.floating-input:focus ~ .password-toggle:hover,
.floating-input:not(:placeholder-shown) ~ .password-toggle:hover {
  top: 18px;
  transform: translateY(0) scale(1.1);
}

.password-toggle:focus {
  outline: none;
  box-shadow: none;
}

.eye-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 8px;
  transition: all 0.3s ease;
}

.checkbox-wrapper:hover {
  transform: translateX(2px);
}

.checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #ff6b35;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.checkbox:checked {
  transform: scale(1.1);
}

.checkbox-label {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.checkbox-wrapper:hover .checkbox-label {
  color: #ff6b35;
}

.forgot-password {
  color: #ff6b35;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.forgot-password::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b35;
  transition: width 0.3s ease;
}

.forgot-password:hover::after {
  width: 100%;
}

.forgot-password:hover {
  transform: translateY(-1px);
}

.terms-checkbox {
  margin-bottom: 25px;
}

.terms-checkbox .checkbox-wrapper {
  align-items: flex-start;
}

.terms-checkbox .checkbox-label {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
}

.terms-link {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.terms-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b35;
  transition: width 0.3s ease;
}

.terms-link:hover::after {
  width: 100%;
}

.login-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  position: relative;
  overflow: hidden;
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.login-btn:hover::before {
  left: 100%;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
}

.login-btn:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 动画样式 */
.animate-fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fadeInUp[data-delay="0.2"] {
  animation-delay: 0.2s;
}

.animate-fadeInUp[data-delay="0.3"] {
  animation-delay: 0.3s;
}

.animate-fadeInUp[data-delay="0.4"] {
  animation-delay: 0.4s;
}

.animate-fadeInUp[data-delay="0.5"] {
  animation-delay: 0.5s;
}

.animate-fadeInUp[data-delay="0.6"] {
  animation-delay: 0.6s;
}

.animate-fadeInUp[data-delay="0.7"] {
  animation-delay: 0.7s;
}

.animate-fadeInUp[data-delay="0.8"] {
  animation-delay: 0.8s;
}

.animate-fadeInUp[data-delay="0.9"] {
  animation-delay: 0.9s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.register-text {
  color: #666;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.register-link {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.register-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b35;
  transition: width 0.3s ease;
}

.register-link:hover::after {
  width: 100%;
}

.register-link:hover {
  transform: translateY(-1px);
}



/* 响应式设计 */
@media (max-width: 768px) {
  .login-bg-text {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .login-main-title {
    font-size: 2.5rem;
  }
  
  .login-sub-title {
    font-size: 1.1rem;
  }
  
  .login-form-wrapper {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 20px;
    width: calc(100% - 40px);
  }
  
  .login-form-container {
    padding: 40px 30px;
  }
  
  .form-title {
    font-size: 1.8rem;
  }
  
  .form-options {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    padding: 30px 20px;
  }
  
  .form-title {
    font-size: 1.5rem;
  }
  
  .terms-checkbox .checkbox-label {
    font-size: 0.8rem;
  }
}

.corner-logo {
  position: absolute;
  top: 32px;
  left: 48px;
  width: 120px;
  height: auto;
  z-index: 10;
}

.corner-logo-text {
  position: absolute;
  top: 32px;
  left: 48px;
  display: flex;
  align-items: center;
  z-index: 10;
}
.corner-logo-img {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}
.corner-logo-title {
  font-family: "华文隶书", "STLiti", serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.18);
  letter-spacing: 2px;
}
</style>